---
title: 'Organization'
description: 'Learn how to use the Nile Auth Organization component'
---

import Theming from '/snippets/theming.mdx';

# Tenant Selector

The `TenantSelector` component provides an interactive way to manage and switch between tenant organizations within an application. It leverages React Query for fetching tenant data and includes functionality to create new tenants.

---

## Features

- **Tenant Selection**: Users can switch between available tenants using a dropdown.
- **Tenant Creation**: If no tenants exist, users can create a new organization.
- **Persistent Selection**: Selected tenants persist via cookies.
- **Server Communication**: Fetches tenant data from an API endpoint.

---

## Installation

Ensure you have the necessary dependencies installed:

```sh
npm install @niledatabase/react
```

---

## Usage

```tsx
import TenantSelector from '@niledatabase/react';

export default function App() {
  return <TenantSelector />;
}
```

---

#### Props

| Name        | Type          | Default | Description                       |
| ----------- | ------------- | ------- | --------------------------------- |
| `client`    | `QueryClient` | `null`  | React Query client instance.      |
| `baseUrl`   | `string`      | `''`    | Base API URL for tenant requests. |
| `className` | `string`      | `''`    | Additional CSS classes.           |

---

### `useTenants`

A hook to fetch tenant data.

```ts
const { data: tenants, isLoading, refetch } = useTenants();
```

Returns:

- `tenants`: List of available tenants.
- `isLoading`: Whether data is loading.
- `refetch()`: Function to refresh data.

---

### `useTenantId`

A hook for managing the currently selected tenant.

```ts
const [tenantId, setTenant] = useTenantId();
```

Returns:

- `tenantId`: The currently selected tenant ID.
- `setTenant(id: string)`: Function to change the active tenant.

---

### `CreateTenant`

A component for creating a new organization.

```tsx
<CreateTenant
  onSuccess={(tenant) => console.log('Created:', tenant)}
  trigger={<button>Create Tenant</button>}
/>
```

#### Props

| Name        | Type                       | Description                       |
| ----------- | -------------------------- | --------------------------------- |
| `trigger`   | `React.ReactElement`       | Element to trigger modal.         |
| `onSuccess` | `(tenant: Tenant) => void` | Callback when tenant is created.  |
| `onError`   | `(error: Error) => void`   | Callback when creation fails.     |
| `fetchUrl`  | `string`                   | API endpoint for tenant creation. |

---

## Behavior

1. **Tenant Selection**: Users can select an existing tenant from a dropdown.
2. **Tenant Creation**: If no tenant exists, users can create one.
3. **Persistent State**: Selected tenant is saved via cookies.
4. **Automatic Data Fetching**: Tenant data is fetched on component mount.

---

## Example UI

- If the user has tenants, they can switch between them.
- If the user has no tenants, they are prompted to create one.
- Clicking "Create Tenant" opens a form to enter an organization name.

<Theming component="<TenantSelector />" />

## Related Topics

- [User Management](/auth/concepts/users)
- [Tenants](/auth/concepts/tenants)
- [User Component](/auth/components/user)
